<template>
	<div class="main-box">
		<DictTypeTree ref="dictTypeTreeRef" @node-click="nodeClick" @backType="backDictType" />
		<div class="table-box">
			<ProTable ref="proTableRef" title="字典列表" 
			:columns="columns" 
			:requestApi="dictDataApi.page"
			:initParam="queryParams" 
			:dataCallback="dataCallback">
				<template #tableHeader>
					<el-button size="default" type="success" class="ml10" @click="onOpenAddDic('add')" v-auth="'system:dictData:add'">
						<el-icon><ele-CirclePlus /></el-icon>新增字典
					</el-button>
				</template>
				<template #operation="scope">
					<el-button size="small" text type="primary" @click="onOpenEditDic('edit', scope.row)" v-auth="'system:dictData:delete'">修改</el-button>
					<el-button size="small" text type="primary" @click="onRowDel(scope.row)" v-auth="'system:dictData:delete'">删除</el-button>
				</template>
			</ProTable>
			<EditDictData ref="editDictDataRef" @refresh="handleQuery()" />
		</div>
	</div>
</template>

<script setup lang="ts" name="systemDict">
import { defineAsyncComponent, reactive, ref } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import { SysDictData, SysDictType } from '/@/api-services/models/system';
import { feature } from '/@/utils/axios-utils';
import dictDataApi from '/@/api-services/apis/system/dictDataApi';
import { ColumnProps } from '/@/components/ProTable/interface';
// 引入组件
import ProTable from '/@/components/ProTable/index.vue';
const EditDictData = defineAsyncComponent(() => import('/@/views/system/dict/component/editDictData.vue'));
const DictTypeTree = defineAsyncComponent(() => import('/@/views/system/dict/component/dictTypeTree.vue'));

// 定义变量内容
const proTableRef = ref();
const dictTypeTreeRef = ref();
const editDictDataRef = ref();
const queryParams = reactive({
	dictTypeId: 0,
})
const state = reactive({
	loading: false,
	dictTypeData: [] as Array<SysDictType>, // 机构树所有数据
	dictData: [] as Array<SysDictData>,//字典数据	
	queryParams: {
		dictTypeId: 0,
		dictDataName: '',
	},
	tableParams: {
		pageIndex: 1,
		pageSize: 10,
		totalPage: 0 as any,
		totalCount: 0 as any
	},
});
//数据回显处理
const dataCallback = (queryRes: any) => {
	var data = queryRes.data;
	return {
		items: data.items,
		totalCount: data.totalCount,
		pageIndex: data.pageIndex,
		pageSize: data.pageSize
	};
};
const columns: ColumnProps<SysDictData>[] = [
	{ prop: "name", label: "字典名称", 
	search: { el: "input", key: "dictDataName",
	props: { placeholder: "字典名称" } } },
	{ prop: "value", label: "字典编码" },
	{ prop: "tagType", label: "标签类型" },
	{ prop: "tagSize", label: "标签大小", align: "center" },
	{ prop: "remark", label: "字典描述", },
	//{ prop: "createrUser", label: "创建人", },
	{ prop: "createTime", label: "创建时间", },
	{ prop: "updateTime", label: "最后修改时间" },
	{ prop: "operation", label: "操作", fixed: "right" }
]

const nodeClick = async (node: any) => {
	queryParams.dictTypeId = node.id;
	proTableRef.value.getTableList();
}

const backDictType = (dictTypeData: Array<SysDictType>) => {
	state.dictTypeData = JSON.parse(JSON.stringify(dictTypeData))
}
const handleQuery = async () => {
	proTableRef.value.getTableList();
}
// 打开新增字典弹窗
const onOpenAddDic = (type: string) => {
	editDictDataRef.value.openDialog(type, {}, state.dictTypeData);
};
// 打开修改字典弹窗
const onOpenEditDic = (type: string, row: any) => {
	editDictDataRef.value.openDialog(type, row, state.dictTypeData);
};
// 删除字典
const onRowDel = (row: any) => {
	ElMessageBox.confirm(`此操作将永久删除字典名称：“${row.name}”，是否继续?`, '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning',
	})
		.then(async () => {
			const [err] = await feature(dictDataApi.delete({id:row.id}))
			if (err) {
				ElMessage.error(err.message)
			}
			else {
				handleQuery();
				ElMessage.success('删除成功');
			}
		})
		.catch(() => { });
};
</script>
<style scoped lang="scss">
// * main-box (树形表格 treeFilter 页面会使用，左右布局 flex)
.main-box {
	display: flex;
	width: 100%;
	height: 100%;
	flex: 1;
	.table-box {
		/* 这里减去的是 treeFilter 组件宽度 */
		width: calc(100% - 290px);
	}
}
</style>